<!DOCTYPE html>
<html>
  <head>
    <title>OpenLayers - Basic project setup using NPM and Browserify</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href='../../../../assets/theme/site.css' rel='stylesheet' type='text/css'>
    <link rel="icon" type="image/x-icon" href="../../../../assets/theme/img/favicon.ico" />
    
  </head>
  <body>
    <header class='navbar navbar-fixed-top' role='navigation'>
      <div class='container'>

        <!-- button that shows up below 768px width -->
        <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-responsive-collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </button>

        <a href='/' class='navbar-brand'><img src='../../../../assets/theme/img/logo70.png'>&nbsp;OpenLayers</a>

        <!-- menu items that get hidden below 768px width -->
        <nav class='collapse navbar-collapse navbar-responsive-collapse'>
          <ul class='nav navbar-nav pull-right'>
            <li><a href='/en/latest/doc/'class="active">Docs</a></li>
            <li><a href='/en/latest/examples/'>Examples</a></li>
            <li><a href='/en/latest/apidoc/'>API</a></li>
            <li><a href='https://github.com/openlayers/openlayers'>Code</a></li>
          </ul>
        </nav>
      </div>
    </header>
    

<div class='container'>
<h1 id="introduction">Introduction</h1>
<p>When going beyond modifying existing examples you might be looking for a way to setup your own code with dependency management together with external dependencies like OpenLayers.</p>
<p>This tutorial serves as a suggested project setup using NPM and Browserify for the most basic needs. There are several other options, and in particular you might be interested in a more modern one (ES2015) <a href="https://gist.github.com/tschaub/79025aef325cd2837364400a105405b8">using Webpack with OpenLayers</a>.</p>
<h2 id="initial-steps">Initial steps</h2>
<p>Create a new empty directory for your project and navigate to it by running <code>mkdir new-project &amp;&amp; cd new-project</code>. Initialize your project using <code>npm init</code> and answer the questions asked.</p>
<p>Add OpenLayers as dependency to your application with <code>npm install --save ol</code>.</p>
<p>At this point you can ask NPM to add required development dependencies by running</p>
<pre><code>npm install --save-dev cssify browserify cssify http-server uglify-js watchify
npm install --save-dev babelify babel-plugin-transform-es2015-modules-commonjs</code></pre>
<p>We will be using <code>cssify</code> to include the css definitions required by OpenLayers in our bundle. <code>watchify</code>, <code>http-server</code> and <code>uglify-js</code> are used to monitor for changes and to build into a minified bundle. <code>babelify</code> and <code>babel-plugin-transform-es2015-modules-commonjs</code> are used to make the <code>ol</code> package, which was created using ES2015 modules, work with CommonJS.</p>
<h2 id="application-code-and-index-html">Application code and index.html</h2>
<p>Place your application code in <code>index.js</code>. Here is a simple starting point:</p>
<pre><code class="language-js">require(<span class="string">'ol/ol.css'</span>);
<span class="keyword">var</span> ol_Map = require(<span class="string">'ol/map'</span>).<span class="keyword">default</span>;
<span class="keyword">var</span> ol_layer_Tile = require(<span class="string">'ol/layer/tile'</span>).<span class="keyword">default</span>;
<span class="keyword">var</span> ol_source_OSM = require(<span class="string">'ol/source/osm'</span>).<span class="keyword">default</span>;
<span class="keyword">var</span> ol_View = require(<span class="string">'ol/view'</span>).<span class="keyword">default</span>;

<span class="keyword">var</span> map = <span class="keyword">new</span> ol_Map({
  target: <span class="string">'map'</span>,
  layers: [
    <span class="keyword">new</span> ol_layer_Tile({
      source: <span class="keyword">new</span> ol_source_OSM()
    })
  ],
  view: <span class="keyword">new</span> ol_View({
    center: [<span class="number">0</span>, <span class="number">0</span>],
    zoom: <span class="number">0</span>
  })
});</code></pre>
<p>You will also need an <code>ìndex.html</code> file that will use your bundle. Here is a simple example:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;Using Browserify with OpenLayers&lt;/title&gt;
    &lt;style&gt;
      #map {
        width: 400px;
        height: 250px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
    &lt;script src=&quot;bundle.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h2 id="creating-a-bundle">Creating a bundle</h2>
<p>With simple scripts you can introduce the commands <code>npm run build</code> and <code>npm start</code> to manually build your bundle and watch for changes, respectively. Add the following to the script section in <code>package.json</code>:</p>
<pre><code class="language-json">"scripts": {
  "start": "watchify index.js -g cssify --outfile bundle.js &amp; http-server",
  "build": "browserify -g cssify index.js | uglifyjs --compress --output bundle.js"
}</code></pre>
<p>Now to test your application open <a href="http://localhost:8080/">http://localhost:8080/</a> in your browser. <code>watchify</code> will update <code>bundle.js</code> whenever you change something. You simply need to reload the page in your browser to see the changes.</p>
<pre><code>$ npm start</code></pre>
<p>Note that <code>bundle.js</code> will contain your application code and all dependencies used in your application. From OpenLayers, it only contains the required components.</p>

</div>

    <footer>
      Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.  All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>. Thanks to our <a href='/sponsors.html'>sponsors</a>.
    </footer>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
  </body>
</html>
